<template>
	<view class="xunlian-page home-wrap" :style="{ 'background':'#fff'}">
		<shopro-navbar :isBack="true" :background="{'background':'#fff'}">
			<text slot="content" class="u-flex u-flex-center u-flex-items-center" style="color: #000; width: 85%; text-align: center;padding-left: 20rpx;height: 100%;">预约训练</text>
		</shopro-navbar>
		<!-- 顶部科目选择 -->
		<view class="subject-select">
			<Dropdown :filterData='filterData' :defaultIndex='defaultIndex' @onSelected='onSelected'></Dropdown>
		</view>

		<!-- 预约通知 -->
		<view class="notice-card">
			<view class="notice-title">
				<image :src="HTTP_IMG_URL()+'/static/images/biaoshi.png'" class="u-biaoshi" mode="widthFix"></image>
				<text class="notice-title-text">线下预约训练通知</text>
			</view>
			<view class="notice-content">
				<view v-for="(item, idx) in noticeList" :key="idx" class="notice-item">
					<text>{{ idx + 1 }}. {{ item }}</text>
				</view>
			</view>
		</view>

		<!-- 温馨提示 -->
		<view class="time-content">
			<view class="tip-card">
				<image :src="HTTP_IMG_URL()+'/static/images/biaoshi.png'" class="u-biaoshi" mode="widthFix"></image>
				<text class="tip-text">每周日下午17:00放下周7天预约位，请及时预约</text>
			</view>
			
			<!-- 场地/日期/时段选择 -->
			<view class="form-section">
				<view class="u-flex u-flex-items-center u-flex-between form-row">
					<view class="form-value">
						<u-picker :show="showFieldPicker" :columns="columns" keyName="label" @confirm="onFieldConfirm" @cancel="showFieldPicker = false"></u-picker>
						<view class="picker-trigger u-flex u-flex-center u-flex-items-center" @click="showFieldPicker = true">
							<text>{{ selectedField }}</text>
							<image :src="HTTP_IMG_URL()+'/static/images/arrow-down.png'" model="aspectFill" class="picker-btn-down"></image>
						</view>
					</view>
					<view class="form-value">
						<CalendarPicker
							:modelValue="modelValue"
							v-model="selectedDates"
							:minDate="minDate"
							:maxDate="maxDate"
							:monthNum="3"
							:color="'#2563eb'"
							title="选择"
							@change="onDateChange"
							style="width: 100%;">
							<view class="picker-trigger u-flex u-flex-center u-flex-items-center">
								<text>{{ selectedDatesLabel }}</text>
								<image :src="HTTP_IMG_URL()+'/static/images/arrow-down.png'" model="aspectFill" class="picker-btn-down"></image>
							</view>
						</CalendarPicker>
					</view>
				</view>
				<view class="form-row u-flex u-flex-items-center u-flex-between">
					<view
						class="form-value time-btns"
						v-for="(item, idx) in timeOptions"
						:key="item.value"
						:class="['time-btn', { active: selectedTime === item.value }]"
						@click="selectedTime = item.value">
						<view class="time-btn-text">{{ item.label }}</view>
						<text class="remain" v-if="item.label === '上午'">
							<text class="time-btn-sheng">剩余: </text>
							<text class="time-btn-num">{{numObj.morning_count || '0'}}</text>
						</text>
						<text class="remain" v-if="item.label === '下午'">
							<text class="time-btn-sheng">剩余: </text>
							<text class="time-btn-num">{{numObj.afternoon_count || '0'}}</text>
						</text>
					</view>
				</view>
				<view class="form-row submit-row">
					<u-button
						type="primary"
						text="提交"
						shape="circle"
						@click="onSubmit"
						:disabled="!canSubmit"
					/>
				</view>
			</view>
		</view>
	
		<!-- 我的预约 -->
		<view class="my-reserve-section">
			<view class="my-reserve-title">
				<image :src="HTTP_IMG_URL()+'/static/images/biaoshi.png'" class="u-biaoshi" mode="widthFix"></image>
				<text>我的预约</text>
			</view>
			<view class="my-reserve-table">
				<view class="my-reserve-th">
					<view class="my-reserve-tr">序号</view>
					<view class="my-reserve-tr">证书类型</view>
					<view class="my-reserve-tr my-reserve-tr-te">预约时间</view>
					<view class="my-reserve-tr">时段</view>
					<view class="my-reserve-tr">地点</view>
					<view class="my-reserve-tr">操作</view>
				</view>
				<view class="my-reserve-tbody" v-for="(item, idx) in myReserveList" :key="item.id">
					<view class="my-reserve-td">{{ idx + 1 }}</view>
					<view class="my-reserve-td">{{ item.type_name }}</view>
					<view class="my-reserve-td my-reserve-td-te">{{ item.res_date }}</view>
					<view class="my-reserve-td">{{ item.type_time }}</view>
					<view class="my-reserve-td">{{ item.site_name }}</view>
					<view class="my-reserve-td">
						<view class="quxiao-btn" @click="onCancelReserve(item)">取消</view>
					</view>
				</view>
			</view>
		</view>
		<SuccessModal :show="showSuccess" @close="showSuccess = false" :title="'提交成功'" :desc="'已预约成功'"/>
	</view>
</template>

<script>
import Dropdown from '@/components/Dropdown.vue'
import CalendarPicker from '@/components/CalendarPicker.vue'
import SuccessModal from '@/components/SuccessModal.vue'
import { record } from '@/api'
const d = new Date()
const year = d.getFullYear()
let month = d.getMonth() + 1
month = month < 10 ? `0${month}` : month
const date = d.getDate()
export default {
	components: {
		CalendarPicker,
		SuccessModal,
		Dropdown
	},
	data() {
		return {
			modelValue: [`${year}-${month}-${date}`],
			filterData:[
				[
					{ text: 'CAAC', value: 1 },
					{ text: 'AOPA', value: 2 },
					{ text: 'UTC', value: 3 }
				]
			],
			defaultIndex:[0],
			showDropdown: false,
			selectedSubject: '',
			selectedSiteId: '',
			columns: [],
			// 通知内容
			noticeList: [],
			// 场地预约
			fieldOptions: [],
			selectedField: '请选择场地',
			showFieldPicker: false,
			// 日期预约
			selectedDates: [],
			minDate: '2025-08-01',
			maxDate: '2035-08-31',
			// 时段
			timeOptions: [
				{
					label: '上午',
					value: 'morning',
					remain: 5,
				},
				{
					label: '下午',
					value: 'afternoon',
					remain: 5,
				}
			],
			selectedTime: 'morning',
			// 我的预约
			myReserveList: [],
			showSuccess: false,
			currentType: '1',
			numObj: {}
		}
	},
	computed: {
		selectedDatesLabel() {
			if (Array.isArray(this.selectedDates) && this.selectedDates.length > 0) {
				return this.selectedDates.map(d => this.formatDate(d)).join(', ')
			} else {
				return '请选择日期'
			}
		},
		canSubmit() {
			return !!(this.selectedField && this.selectedDates.length > 0 && this.selectedTime)
		}
	},
	onLoad() {
		this.getSiteList();
		this.getSiteOrderList();
	},
	methods: {
		HTTP_IMG_URL() {
			return this.$imgUrl;
		},
		async getSiteOrderList () {
			const res = await record.getSiteOrderList().then((res) => {
				if (res.response.data.code == 1) {
					console.log(res.response.data.data, 'yuyue');
					this.myReserveList = res.response.data.data;
				}
			})
		},
		async getSiteList () {
			const res = await record.getSiteList({
				type: this.currentType
			}).then((res) => {
				if (res.response.data.code == 1) {
					console.log(res.response.data.data, 'changdi');
					this.$nextTick(() => {
						const coluArr = res.response.data.data.map(item => {
							return {
								label: item.name,
								id: item.id
							}
						});
						this.columns.push(coluArr);
					});
					console.log(this.columns[0], 'changdi===');
				}
			})
		},
		onSelected(data) {
			console.log(data, 'datadata');
			this.columns = [];
			let val = data[0].text;
			if(val === 'CAAC') {
				this.currentType = '1';
			} else if(val === 'AOPA') {
				this.currentType = '2';
			} else {
				this.currentType = '3';
			}
			this.getSiteList();
		},
		onFieldConfirm(value) {
			console.log("===value", value.value)
			this.selectedField = value.value[0].label;
			this.selectedSiteId = value.value[0].id;
			this.showFieldPicker = false;
		},
		onDateChange(val) {
			this.selectedDates = val;
			this.getSiteSum();
		},
		async getSiteSum () {
			const res = await record.getSiteSum({
				site_id: this.selectedSiteId,
				res_date: this.selectedDates[0]
			}).then((res) => {
				if (res.response.data.code == 1) {
					console.log(res.response.data.data, 'shengyu');
					this.numObj = res.response.data.data;
				}
			})
		},
		formatDate(val) {
			if (!val) return ''
			const d = new Date(val)
			return `${d.getFullYear()}.${(d.getMonth()+1).toString().padStart(2,'0')}.${d.getDate().toString().padStart(2,'0')}`
		},
		async onSubmit() {
			// 提交预约
			const res = await record.addSiteOrder({
				site_id: this.selectedSiteId,
				res_date: this.selectedDates[0],
				type: this.selectedTime
			}).then((res) => {
				if (res.response.data.code == 1) {
					this.showSuccess = true;
					this.getSiteOrderList();
				}
			})
		},
		async onCancelReserve(item) {
			// 取消预约
			const res = await record.cancelSite().then((res) => {
				if (res.response.data.code == 1) {
					this.myReserveList = this.myReserveList.filter(i => i.id !== item.id)
					uni.showToast({
						title: '已取消',
						icon: 'none',
					})
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.xunlian-page {
	background: #f7f8fa;
}
.subject-select {
	margin-bottom: 10rpx;
	position: relative;
	.u-class-content{
		width: 90%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #f6f6f8;
		border-radius: 24rpx;
		padding: 20rpx;
		margin: 0 auto;
	}
	.dropdown-content{
		position: absolute;
		top: 0;
		left: 0;
		opacity: 1;
		width: 100vw;
		height: 60rpx;
		z-index: 10;
		.dropdown-trigger {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			color: #2563eb;
			.dropdown-arrow {
				margin-left: 8rpx;
			}
		}
	}
	
}
.notice-card {
	background: linear-gradient( 180deg, #F2F7FD 0%, #FFFFFF 100%);
	box-shadow: 0px 2px 4px 0px rgba(41,121,255,0.05);
	border-radius: 24rpx;
	border: 1px solid #FFFFFF;
	margin: 20rpx 20rpx;
	padding: 20rpx;
	.notice-title {
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: flex-start;
		font-size: 28rpx;
		font-weight: bold;
		color: #2563eb;
		margin-bottom: 14rpx;
		.notice-title-text {
			margin-left: 8rpx;
		}
	}
	.notice-content {
		color: #333;
		font-size: 24rpx;
		.notice-item {
			color: #222222;
			line-height: 18px;
			text-align: justify;
			margin-bottom: 10rpx;
		}
	}
}
.time-content{
	background: linear-gradient( 180deg, #F2F7FD 0%,#FFFFFF 30%, #FFFFFF 100%);
	box-shadow: 0px 2px 4px 0px rgba(41,121,255,0.05);
	border-radius: 12px;
	border: 1px solid #FFFFFF;
	padding: 20rpx;
	margin: 20rpx;
	.tip-card {
		color: #ff9900;
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: flex-start;
		font-size: 24rpx;
		margin-bottom: 20rpx;
		.tip-text {
			margin-left: 8rpx;
		}
	}
}

.form-section {
	border-radius: 16rpx;
	padding: 24rpx 20rpx 8rpx 20rpx;
	margin-bottom: 24rpx;
	flex-direction: row;
	justify-content: space-between;
	flex-direction: column;
	flex-wrap: wrap;
	.form-row {
		width: 100%;
		display: flex;
		align-items: center;
		margin-bottom: 18rpx;
		.form-label {
			width: 140rpx;
			color: #888;
			font-size: 28rpx;
		}
		.form-value {
			width: 38.5%;
			flex: 1;
			display: flex;
			align-items: center;
			background: #F6F6F8;
			border-radius: 20rpx;
			.picker-trigger {
				background: #F6F6F8;
				display: flex;
				align-items: center;
				border-radius: 12rpx;
				margin: 8rpx 0 8rpx 0rpx;
				height: 84rpx;
				color: #202020;
				font-size: 28rpx;
				cursor: pointer;
				width: calc(100% - 50rpx);
				flex-direction: row !important;
				justify-content: space-between;
				padding: 0 20rpx;
			}
			.u-icon {
				margin-left: 8rpx;
			}
			&:last-child {
				margin-left: 20rpx;
			}
		}
		.time-btns {
			display: flex;
			gap: 24rpx;
			&.time-btn {
				background: #F6F6F8;
				border: 2rpx solid #F6F6F8;
				border-radius: 12rpx;
				padding: 8rpx 32rpx;
				font-size: 28rpx;
				cursor: pointer;
				display: flex;
				align-items: center;
				.time-btn-text{
					color: #202020;
				}
				.remain {
					font-size: 22rpx;
					color: #888;
					.time-btn-sheng{
						color: #8E8E8E;
					}
					.time-btn-num{
						color: #2563eb;
					}
				}
			}
			&.active {
				border: 2rpx solid #2563eb;
				color: #fff;
				background: rgba(22,100,255,0.1);
			}
		}
		&.submit-row {
			justify-content: flex-end;
			margin-top: 12rpx;
			margin-bottom: 0;
		}
	}
}
.my-reserve-section {
	background: #fff;
	border-radius: 16rpx;
	padding: 24rpx 20rpx 8rpx 20rpx;
	box-shadow: 0px 2px 4px 0px rgba(66,120,253,0.08);
	border: 1px solid rgba(151,151,151,0.08);
	width: 88.5%;
	margin: 0 auto 40rpx;
	.my-reserve-title {
		display: flex;
		align-items: center;
		flex-direction: row;
		font-size: 28rpx;
		font-weight: bold;
		color: #2563eb;
		margin-bottom: 12rpx;
	}
	.my-reserve-table {
		margin-top: 8rpx;
		font-size: 24rpx;
		.my-reserve-th, .my-reserve-tbody {
			padding: 0rpx 0;
		}
		.my-reserve-th{
			background: #ECF1FA;
			display: flex;
			color: #4F73A4;
			border-top-right-radius: 20rpx;
			border-top-left-radius: 20rpx;
			overflow: hidden;
			flex-direction: row!important;
			justify-content: space-between;
			.my-reserve-tr{
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				border-right: 2rpx solid #fff;
				padding: 10rpx 0;
				min-height: 50rpx;
				&:last-child{
					border-right: none;
				}
			}
			.my-reserve-tr-te{
				flex: 1.5;
			}
		}
		.my-reserve-tbody{
			display: flex;
			flex-direction: row;
			.my-reserve-td {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				border-right: 2rpx solid #fff;
				padding: 10rpx 0;
				min-height: 50rpx;
				background: #F6F7FA;
				&:last-child {
					border-right: none;
				}
				.quxiao-btn{
					width: 80%;
					border-radius: 26rpx;
					background: rgba(22,100,255,0.1);
					color: #1664FF;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 6rpx 10rpx;
				}
			}
			.my-reserve-td-te{
				flex: 1.5;
			}
		}
	}
}
.picker-btn-down{
	width: 20rpx;
	height: 14rpx;
	margin-left: 20rpx;
}
.u-biaoshi {
	width: 30rpx;
	margin-right: 8rpx;
}
::v-deep .u-dropdown__menu__item__content__arrow{
	display: none!important;
}
.slot-content{
	.active{
		color: #1664FF;
	}
}
</style>
